* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 头部的css */
.head{
    height: 110px;
    background-color: whitesmoke;
}
.head_center{
    width: 1500px;
    height: 100%;
    margin: 0 auto;
    /*background-color: #fbc2eb;*/
}
.title{
    height: 110px;
    width: 350px;
    /*background-color: greenyellow;*/
    font-size: 30px;
    text-align: center;
    line-height: 110px;
    color: #02B2B5;
    /* 浮动 */
    float: left;
}
.menu{
    width: 700px;
    height: 100%;
    /*background-color: wheat;*/
    /*  浮动*/
    float: left;
    margin-left: 150px;
}
.menu>.li1{
    float: left;
    width: 100px;
    height: 40px;
    line-height: 40px;
    /*background-color: #7C0070;*/
    margin-left: 20px;
    margin-top: 35px;
    text-align: center;
    border-radius: 20px;
    font-size: 20px;
}
.menu>.li1>a{
    /* 转换成块级标签 */
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 20px;
}
.menu>.li1>a:hover{
    background-color: #02B2B5;
}

/* 中间部分的css */
.middle{
    height: 1300px;
    background-color: #3D7FBB;
}

/* 轮播图 */
.middle .picture{
    height: 600px;
    background-image: url("../pic/p1.jpg");
    background-size: 100% 600px;
    min-width: 1500px;
}

/* 左右箭头 */
.picture a{
    display: block;
    height: 100px;
    width: 50px;
    /*background-color: green;*/
    font-size: 50px;
    color: white;
    line-height: 100px;
    text-align: center;
}

/* 实现点击的高亮 */
.picture a:hover{
    color: #fec2eb;
}

/* 浮动和定位都是脱离了正常的文档流 */
.picture .left_a{
    float: left;
    margin-top: 250px;
    margin-left: 50px;

}
.picture .right_a{
    float: right;
    margin-top: 250px;
    margin-right: 50px;
}

.picture .dots{
    width: 160px;
    height: 40px;
    /*background-color: #ff4200;*/
    float: left;
    margin-left: 100px;
    margin-top: 520px;
}

.picture .dots li{
    width: 11px;
    height: 11px;
    /*background-color: #fbc2eb;*/
    /* inline-block具有设置宽高的特性，同时也具有inline元素默认不换行的特性。 */
    display: inline-block;
    border: 3px solid rgba(204, 204, 204, 0.5);
    border-radius: 20px;
    margin-left: 10px;
}

.picture .dots li a{
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 20px;
}
.picture .dots li a:hover{
    background-color: #a6c1ee;
}


/*  商品的部分 */
.middle>.list{
    height: 700px;
    background-color: white;
}
.middle>.list>p{
    height: 100px;
    font-size: 40px;
    text-align: center;
    line-height: 100px;
}
.middle>.list>ul{
    width: 1300px;
    height: 600px;
    /*background-color: hotpink;*/
    margin: 0 auto;
}
.middle>.list>ul>.li3{
    height: 230px;
    width: 285px;
    /*background-color: green;*/
    float: left;
    margin-top: 30px;
    margin-left: 30px;
    background-repeat: no-repeat;
}
.middle>.list>ul>.li3>span{
    display: block;
    margin-top: 210px;
    text-align: center;
}

 /*尾部1*/
/*.foot{*/
/*    height: 110px;*/
/*    background-color: #DFC2EC;*/
/*    min-width: 1500px;*/
/*}*/
/*.foot>.foot_1{*/
/*    font-size: 40px;*/
/*    !*background-color: #3D7FBB;*!*/
/*    height: 110px;*/
/*    width: 500px;*/
/*    text-align: center;*/
/*    float: left;*/
/*    margin-left: 200px;*/
/*    color: #3D7FBB;*/
/*    line-height: 110px;*/
/*}*/
/*.foot_2>.li4>p{*/
/*    font-size: 25px;*/
/*    height: 40px;*/
/*    text-align: center;*/
/*    float: right;*/
/*    margin: 35px 25px;*/
/*    line-height: 35px;*/
/*}*/


/*尾部2*/
.foot{
    height: 110px;
    background-color: #DFC2EC;
    min-width: 1500px;
}
.foot>.foot_p1{
    height: 110px;
    width: 500px;
    /*background-color: #fbc2eb;*/
    float: left;
    margin-left: 200px;
    line-height: 110px;
    text-align: center;
    font-size: 40px;
    color: #02B2B5;
}
.foot>.foot_p2{
    float: left;
    margin-left: 300px;
    margin-top: 20px;
    /*background-color: #fbc2eb;*/
    line-height: 35px;

}
.foot>.foot_p2>span{
    display: block;
    color: white;
    font-size: 20px;
}
